<template>
	<div v-loading="loading" style="width:100%" element-loading-text="正在获取组卷信息，请稍候..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
		<p class="testTitle">{{ currentTest.name }}</p>
		<div v-for="(x,index) in questionList" class="quesBox" @click="chooseQues(index)" :class="{active:currentIndex==index}">
			<span>{{ index+1 }}.</span>
			<div>
				<div v-html="x.body"></div>
				<div v-if="currentIndex==index">
					<span>正确答案：</span> 
					<div v-html="x.answer"></div>
					<div v-html="x.analysis" class="analysis"></div>
				</div>
			</div>
			<button @click="deleteQues(index)" class="deleteSpan">删 &nbsp;除</button>
		</div>
		<div @click="complete" class="complete">完成</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import api from '../../api'
	import { API_ROOT } from '../../util/config'
	import { mapState, mapMutations } from "vuex"
	import { setStore, getStore, removeStore } from "../../util/util";
	export default {
		data() {
			return {
				currentTest: {},
				questionList: [],
				modification: false, //是否是修改
				test_params: {},
				tids: [],
				loading: true,
				currentIndex: -1,
				courseid:''
			}
		},
		created() {
			this.INIT_STATE()
			this.currentTest = getStore('currentTest');
			this.test_params = getStore('test_params');
			this.courseid=this.$route.params.courseid
			//如果是新创建的试卷
			if(this.test_params) {
				this.getTestQuestionList(this.test_params)
			} else if(this.currentTest.content) {
				//修改的试卷
				this.modification = true;
				this.getListQuestionById(this.currentTest.content)
				this.tids = this.currentTest.content.split(',')
			}
		},
		computed: {
			...mapState(["userlogin"])
		},
		methods: {
			...mapMutations(["INIT_STATE"]),
			complete() {
				var that = this;
				//如果是修改那么用updateTeacherQuestion
				//如果是增加那么用addTeacherQuestion
				if(this.modification) {
					api.modifiTest({
						qid: this.currentTest.id,
						name: encodeURI(this.currentTest.name),
						courseid: this.courseid,
						teacherid: this.userlogin.id,
						nums: this.tids.length,
						content: this.tids.join(',')
					}).then(function(out) {
//						that.$message({
//							type: 'success',
//							message: '修改成功'
//						});
						removeStore('currentTest')
						that.$router.push({
							path: '/taojuan/1'
						})
					})
				} else {
					api.addTest({
						name: encodeURI(this.currentTest.name),
						courseid: this.courseid,
						teacherid: this.userlogin.id,
						nums: this.tids.length,
						content: this.tids.join(',')
					}).then(function(out) {
//						that.$message({
//							type: 'success',
//							message: '组卷成功'
//						});
						removeStore('test_params')
						that.$router.push({
							path: '/taojuan/1'
						})
					})
				}

			},
			chooseQues(index) {
				if(this.currentIndex == index) {
					this.currentIndex = -1
				} else {
					this.currentIndex = index;
				}
			},
			deleteQues(index) {
				if(this.tids.length > 1) {
					//删题目
					this.questionList.splice(index, 1);
					this.tids.splice(index, 1)
				} else {
					//删卷子
					this.$confirm('此题为该试卷最后一题，删除此题将同步删除此试卷, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						var that = this
						api.deleteTest({
							qid: this.currentTest.id,
							teacherid: this.userlogin.id
						}).then(response => {
//							that.$message({
//								type: 'success',
//								message: '删除成功!'
//							});
							that.$router.push({
								path: '/taojuan/2'
							})
						})
					}).catch(() => {
//						this.$message({
//							type: 'info',
//							message: '已取消删除'
//						});
					});
				}
			},
			getTestQuestionList(params) {
				var that = this
				api.getTestQuestionList(params).then(response => {
					if(response.data.code == 200) {
						that.questionList = response.data.datalist
						that.tids = that.questionList.map(function(x) {
							return x.id
						})
					} else {
//						that.$message({
//							type: 'error',
//							message: '对不起，组卷失败，请重试'
//						});
					}
					that.loading = false
				})
			},
			getListQuestionById(tids) {
				var that = this;
				api.getListQuestionById(tids).then(response => {
					if(response.data.code == '200') {
						that.questionList = response.data.datalist;
					} else {
//						that.$message({
//							type: 'error',
//							message: '对不起，组卷失败，请重试'
//						});
					}
					that.loading = false
				})
			}
		}
	}
</script>

<style scoped>
	.testTitle {
		text-align: center;
		color: white;
		font-weight: 0!important;
		height: 40px;
		line-height: 40px;
		background-color: #14ACF4;
		
		
	}
	
	.quesBox {
		padding-top: 20px;
		padding-left: 16px;
		min-height: 80px;
		border-bottom: 1px dashed #f2f2f2;
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	
	.quesBox>span {
		flex: 1;
		position: absolute;
		top: 25px;
	}
	
	.quesBox>h4 {
		line-height: 40px;
		color: #1dbc59;
	}
	
	.quesBox>.analysis {}
	
	.quesBox.active {
		border: 1px solid #999999;
	}
	
	.quesBox>div {
		flex: 8;
		padding-left: 8px;
		text-indent: 16px;
		line-height: 26px;
	}
	.quesBox>div>div>span{
		font-weight: bold;
		color: #14ACF4;
		font-size: 14px;
	}
	.quesBox>.deleteSpan {
		width: 80px;
		height: 30px;
		background-color: #14acf4;
		color: white;
		line-height: 30px;
		margin-top: 15px;
		margin-left: 30px;
		font-size: 14px;
		text-decoration: none;
		border: none;
		text-align: center;
		margin-right: 16px;
	}
	
	.complete {
		width: 100%;
		margin-top: 40px;
		letter-spacing: 12px;
		font-size: 16px;
		background-color: #FFAA60;
		border-radius: none;
		text-align: center;
		color: white;
		height: 36px;
		line-height: 36px;
	}
</style>